<template>
	<view class="container">
		<view class="header">
			<view class="confirm-btn">
				<el-button disabled style="font-size: 16px; color: #f5f5f5;" link>
					无
				</el-button>
			</view>
			<view class="header-title">修改手机号</view>
			<view class="confirm-btn">
				<el-button id="confirm-btn" @click="confirmSubmit" style="font-size: 16px; color: #BD3124;" link>
					确认
				</el-button>
			</view>
		</view>
		<view class="ipt-area">
			<input type="tel" v-model="currInput" placeholder="请输入新的手机号"></input>
			<text class="remind">为保障账号安全，仅支持本人已实名认证的手机号进行绑定。更换手机号后，原手机号将解除与本账号的所有绑定关系。</text>
		</view>
	</view>
</template>

<script>
	import {
		updateUser
	} from '@/api/user';

	export default {
		data() {
			return {
				userInfo: {},
				currInput: ''
			}
		},

		onLoad() {
			this.getUserInfo();
		},

		mounted() {
			const ipt = document.querySelector("input");
			const confirmBtn = document.getElementById("confirm-btn");
			ipt.addEventListener('input', () => {
				if (ipt.value.trim()) {
					confirmBtn.style.color = "#BD3124";
				} else {
					confirmBtn.style.color = "#c87a7a";
				}
			});
		},

		methods: {
			getUserInfo() {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = JSON.parse(storedUserInfo);
					this.currInput = this.userInfo.tel;
				}
			},

			async confirmSubmit() {
				const confirmBtn = document.getElementById("confirm-btn");
				const newTel = this.currInput.trim();
				const oldTel = this.userInfo.tel;
				if (!newTel || newTel === oldTel) {
					return;
				}
				// 手机号正则
				const telPattern = /^1[34578]\d{9}$/;
				// 输出 true
				const match = telPattern.test(newTel);
				// 验证通过，提交信息
				if (match) {
					const account = this.userInfo.account;
					const result = await updateUser({
						account,
						tel: newTel
					});
					if (result.code === 200) {
						this.userInfo.tel = newTel;
						uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
						uni.showToast({
							title: '手机号修改成功！',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							});
						}, 2000);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 95vh;
		background-color: #F5F5F5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 24px 0;
		font-size: 16px;
	}

	.header-title {
		color: #333;
	}

	.confirm-btn {
		margin: 0 16px;
	}

	.header-title {
		margin-left: 12px;
	}

	.ipt-area {
		padding: 0 16px;
	}

	.ipt-area input {
		width: 90%;
		height: 56px;
		padding: 0 16px;
		border-radius: 16px;
		background-color: #fff;
		margin-bottom: 8px;
	}

	input:hover {
		animation: fadeIn 0.5s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			border: none;
		}

		to {
			opacity: 1;
			border: 2px solid #D20000;
			box-shadow: 0 0 8px rgba(189, 49, 36, 0.3);
		}
	}

	.remind {
		color: #666;
		font-size: 12px;
	}
</style>